<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-06-12 07:41:22
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-06-18 16:04:11
 * @FilePath: \vue3_admin_template\project\src\views\screen\component\Year\year.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%A
-->
<template>
  <div class="box7">
    <p class="title">年度游客量对比</p>
    <p class="bg"></p>
    <div class="echart" ref="echart"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

import '@/utils/echartWordCloud/index.js'
//获取图形图表的DOM节点
let echart = ref()
let myEcharts = ref()
const option = {
  tooltip: {
    show: true,
    formatter: (e: any) => {
      return `${e.data.label}：${e.data.value}`
    },
  },
  series: [
    {
      type: 'wordCloud',
      // 形状 circle 圆 cardioid  心 diamond 菱形
      // triangle-forward triangle 三角 star五角星
      shape: 'diamond',
      left: 'center',
      top: 10,
      gridSize: 20,
      sizeRange: [35, 80],
      rotationRange: [0, 0],
      rotationStep: 90,
      drawOutOfBound: false,
      labelStyle: {
        color: '#ffffff',
        fontSize: 12,
        width: 80,
      },
      textStyle: {
        color: function () {
          // Random color
          return (
            'rgb(' +
            [
              Math.round(Math.random() * 255),
              Math.round(Math.random() * 255),
              Math.round(Math.random() * 255),
            ].join(',') +
            ')'
          )
        },
      },
      data: [
        { name: '⬤', value: 100, label: '2024' },
        { name: '⬤', value: 21, label: '2025' },
        { name: '⬤', value: 43, label: '2022' },
        { name: '⬤', value: 12, label: '2023' },
        { name: '⬤', value: 80, label: '2021' },
        { name: '⬤', value: 65, label: '2020' },
        { name: '⬤', value: 19, label: '2019' },
        { name: '⬤', value: 50, label: '2018' },
        { name: '⬤', value: 62, label: '2017' },
      ],
    },
  ],
}

onMounted(() => {
  //初始化Echarts实例
  myEcharts.value = echarts.init(echart.value)
  //  初始化配置项
  myEcharts.value.setOption(option)
})
</script>

<style lang="scss" scoped>
.box7 {
  margin: 10px 0px 0 0;
  width: 100%;
  height: 100%;
  background: url('../../images/dataScreen-main-cb.png') no-repeat;
  background-size: 100% 100%;
  .title {
    color: #fff;
    font-size: 20px;
    margin-top: 25px;
  }
  .bg {
    width: 68px;
    height: 7px;
    background: url('../../images/dataScreen-title.png') no-repeat;
    background-size: 100% 100%;
    margin: 10px 0 0 20px;
  }

  .echart {
    width: 100%;
    height: calc(100% - 50px);
    // background-color: red;
  }
}
</style>
